<!-- 菜单管理实现方案1--每个菜单存为一个文档，对应增删改接口操作 -->
<script lang="ts" setup>
const callbackMessage = useCallbackMessage();
const PageConfig = {
  //被操作实体的名称
  entity: "menu",
  api: {
    //获取列表数据
    list: "/list",
  },
};

const action = ref("list");

onMounted(() => {
  getList();
});

interface Tree {
  id: number;
  label: string;
  name: string;
  path: string;
  icon?: string;
  order?: number;
  parentId?: number;
  children?: Tree[];
}

const Model: {
  [key: string]: any;
} = {
  name: {
    label: "菜单名称",
    require: true,
  },
  path: {
    label: "菜单路径",
    require: true,
  },
  icon: {
    label: "菜单图标",
  },
  order: {
    label: "菜单顺序",
    type: "number",
  },
};

const dataSource = ref<Tree[]>([]);

const getList = async () => {
  action.value = "list";
  const res: {
    [key: string]: any;
  } = await $fetch(`/api/${PageConfig.entity}${PageConfig.api.list}`);

  dataSource.value = res.data;
};

const handle_add = async (data: Tree, node: Tree) => {
  action.value = "add";
  dialogVisible.value = true;
  await nextTick();
  if (editMenuFormRef.value) {
    editMenuFormRef.value.localFormData = {
      parentId: data.id,
    };
  }
};

const handle_edit = async (data: Tree) => {
  action.value = "edit";
  dialogVisible.value = true;
  await nextTick();
  if (editMenuFormRef.value) {
    editMenuFormRef.value.localFormData = data;
  }
};

const handle_del = async (id: string) => {
  try {
    await useFetch(`/api/${PageConfig.entity}/${id}`, {
      method: "DELETE",
    });
    callbackMessage.value = {
      show: true,
      valid: true,
      content: "操作成功",
    };
    getList();
  } catch (e: any) {
    callbackMessage.value = {
      show: true,
      valid: false,
      content: e.data.message,
    };
  }
};

const dialogVisible = ref(false);

const addTop = () => {
  action.value = "add";
  if (editMenuFormRef.value) {
    editMenuFormRef.value!.localFormData = {};
  }

  dialogVisible.value = true;
};

import { SForm } from "#components";

const editMenuFormRef = ref<InstanceType<typeof SForm> | null>(null);

const save = async () => {
  if (editMenuFormRef.value) {
    editMenuFormRef.value.submitForm(editMenuFormRef.value.formRef);
  }
};
const saveOK = () => {
  getList();
  setTimeout(() => {
    dialogVisible.value = false;
  }, 500);
};
</script>

<template>
  <div class="flex flex-col items-center fullParent overflow-auto pt-10">
    <el-dialog v-model="dialogVisible" width="500" title="编辑菜单" draggable>
      <S-form
        v-if="dialogVisible"
        ref="editMenuFormRef"
        hideHandle
        :Model="Model"
        :colNum="1"
        :saveAPI="`/${PageConfig.entity}/${action}`"
        :saveOK="saveOK"
      />

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-button type="primary" @click="addTop"> 添加顶级菜单 </el-button>

    <el-tree
      class="mt4"
      style="min-width: 600px"
      :data="dataSource"
      node-key="path"
      accordion
      default-expand-all
      :expand-on-click-node="false"
      :indent="40"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <div
            class="flex items-center gap-2"
            :class="{
              'font-bold': node.level === 1,
              'text-4': node.level === 1,
            }"
          >
            <S-icon v-if="data.icon" :icon="data.icon" />
            <div>
              {{ node.label }}
            </div>
          </div>

          <div>
            <el-button type="primary" link @click="handle_add(data, node)">
              <S-icon icon="material-symbols-light:add-rounded" />
              <span class="ml2">添加</span>
            </el-button>
            <el-button
              class="ml4"
              type="primary"
              link
              @click="handle_edit(data)"
            >
              <S-icon icon="line-md:edit-twotone" />
              <span class="ml2">修改</span>
            </el-button>

            <el-popconfirm title="确定删除吗?" @confirm="handle_del(data.id)">
              <template #reference>
                <el-button class="ml4" type="danger" link>
                  <S-icon icon="wpf:delete" />
                  <span class="ml2">删除</span>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
    </el-tree>
    <S-msgWin :msg="callbackMessage" />
  </div>
</template>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.fullParent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

::v-deep .el-tree-node {
  margin-top: 12px;
}
</style>
